<template>
	<div class="">
		<!-- 顶部背景图 -->
		<div class="headImg" style="
        width: 100%;
        height: 330px;
        background-image: url(https://nec.xmu.edu.cn/images/banner-inner2.jpg);
      ">
			<div class="" style="">
				<h1 style="color: #fff; font-weight: 600; font-size: 50px">通知公告</h1>
			</div>
			<div class="breadcrumb">
				<span style="color: #fff">所在位置：</span>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item><span style="color: #fff">首页</span>
					</el-breadcrumb-item>
					<el-breadcrumb-item><span style="color: #fff">通知公告</span></el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>

		<!-- 通知列表 -->
		<div class="informs">
			<div class="Items" v-for="(item, index) in TongzhiList.slice((currentPage1-1)*PageSize,currentPage1*PageSize)" :key="index" @click="openinforms(item)">
				<div class="Items-left">
					<span style="color: #b22a01; font-size: 22px; font-weight: 600">{{getTimeDay(getTimestamp(item.create_time))}}</span>
					<span style="font-size: 14px; color: #8e8e8e">{{gitTimeYear(getTimestamp(item.create_time))}}</span>
				</div>
				<div class="Items-right">
					<div>
						<i class="el-icon-caret-right"></i>
						<span style="font-size:20px;font-weight: 600;">{{ item.title }}</span>
					</div>

					<div class="Centent-Span" style="margin-top: 15px;">
						<span style="font-size: 14px;" v-html="richTextFormat(item.content)">
							<!-- {{ item.content }} -->
						</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 分页器 -->
		<div class="Paging">
			<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage1"
			      :page-size="PageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="TongzhiList.length">
			    </el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				TongzhiList: [],
				PageSize: 10,
				currentPage1: 1,
				ItemMSG: [{
						name: "关于举办大数据人才综合能力提升高级研修班的通知",
					},
					{
						name: "关于举办大数据人才综合能力提升高级研修班的通知",
					},
					{
						name: "关于举办大数据人才综合能力提升高级研修班的通知",
					},
				],
			};
		},
		methods: {
			//富文本过滤
			richTextFormat(value = '', len = 32) {
				// value = value.replace(/<\[^>]*>/g,'')
				value = value.replace(/<\.+?>/g, '');
				value = value.replace(/\s+/g, '');
				if (value.length > 30) {
					return value.slice(0, len) + "...";
				}
				return value;
			},
			// 时间转时间戳
			getTimestamp(time) { //把时间日期转成时间戳
				return (new Date(time)).getTime()
			},
			
			// 时间戳转化天
			getTimeDay(DayTime) {
				if (DayTime.length == 10) {
					let time = new Date(DayTime * 1000);
					let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
					return d;
				} 
					let time = new Date(DayTime);
					let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
					return d;
				
			},
			
			// 时间戳转化年月
			gitTimeYear(YearTime){
				if (YearTime.length == 10) {
					let time = new Date(YearTime * 1000);
					let y = time.getFullYear();
					let m = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
					let timedate = y + '-' + m;
					return timedate;
				} 
					let time = new Date(YearTime);
					let y = time.getFullYear();
					let m = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
					let timedate = y + '-' + m;
					return timedate;
			},

			/* 
				item:通知列表单个元素
			 */
			openinforms(item) {
				// console.log(item);
				sessionStorage.setItem('TongZhiItems', JSON.stringify(item))
				this.$router.push({
					name: "informMsg",
				});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.PageSize = val
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage1 = val
			},
		},
		computed: {
			// ...mapState(['TongzhiList'])
		},
		mounted() {
			this.TongzhiList = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')).Tongzhi : this.$store.state.Tongzhi
			// console.log(this.$store.state.Tongzhi);
			// sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')).News : this.$store.state.News
		}
	};
</script>

<style scoped lang="scss">
	// 进行修改选中项背景和字体
	::v-deep {
		.number:hover {
			color: red !important;
		}

		.el-pagination.is-background .el-pager li:not(.disabled) {
			background-color: #fff; // 进行修改未选中背景和字体
			// color:var(--color);
		}

		// 进行修改选中项背景和字体
		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: red;
			color: #fff;
		}
	}

	.headImg {

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		padding-left: 200px;

		.breadcrumb {
			display: flex;
			align-items: center;

			.myColor>>>.el-breadcrumb__inner {
				color: #3a6df3;
			}
		}
	}

	.informs {
		width: 100%;
		align-items: center;
		display: flex;
		flex-direction: column;
		margin-top: 50px;

		.Items {
			width: 1200px;
			display: flex;
			align-items: center;
			padding: 15px 50px;
			border-bottom: 1px solid #d4d4d4;

			.Items-right {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				cursor: pointer;
				flex-direction: column;

				.Centent-Span {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 200px; //文本宽度限制,低于值时显示省略号
				}
			}

			.Items-right:hover {
				color: #ff0000;
			}

			.Items-left {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin-right: 100px;
			}
		}
	}

	.Paging {
		margin: 40px 0;
		display: flex;
		justify-content: center;
	}
</style>
